<template>
  <div class="layout">
    <!-- 左侧菜单栏 -->
    <el-menu
        :default-active="activeIndex"
        class="menu"
        :collapse="isCollapse"
        background-color="#2d3a4b"
        text-color="#bfcbd9"
        active-text-color="#409eff"
        router
    >
      <el-menu-item index="/admin/user">
        <el-icon><HomeFilled /></el-icon>
        <template #title>用户管理</template>
      </el-menu-item>

      <el-menu-item index="/admin/stock">
        <el-icon><Grid /></el-icon>
        <template #title>股票信息</template>
      </el-menu-item>

      <el-menu-item index="/sub3">
        <el-icon><Document /></el-icon>
        <template #title>子菜单 3</template>
      </el-menu-item>


    </el-menu>

    <!-- 右侧内容区域 -->
    <div class="content">
      <el-card shadow="hover">
        <!-- 路由视图 -->
        <router-view />
      </el-card>
    </div>
  </div>





</template>

<script setup>
import { ref, watch} from 'vue'
import { useRoute} from 'vue-router'
import { HomeFilled, Grid, Document } from '@element-plus/icons-vue'
const isCollapse = ref(false)

// 获取当前路由
const route = useRoute()


// 当前选中菜单 index
const activeIndex = ref(route.path)

// 路由变化时同步菜单高亮
watch(
    () => route.path,
    (newPath) => {
      activeIndex.value = newPath
    }
)

</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
}

.menu {
  width: 200px;
  min-height: 100vh;
  border-right: none;
  transition: width 0.2s;
}

.content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.el-card {
  border-radius: 16px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
</style>
